<template>
    <div class="list">
        <!--导航-->
        <distributionheader :index='0' />
        <!-- 头部搜索 -->
        <header>            
            <div class="filter-part">
                <div class="filter-btn-group">
                    <i-button  style="width:51px;height:35px;" type="info" @click="handleAdd">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </i-button>
                </div>
              <div class="filter-item">
                  <provinces
                    :province="filterObj.provinceEnd"
                    :city="filterObj.cityEnd"
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    ref="provinces"
                  ></provinces>
                </div>
                <div class="filter-btn-group">
                   <i-button style="width:51px;height:35px;" type="primary" @click="handleSearch" icon="ios-search"></i-button>
                   <i-button style="width:51px;height:35px;" @click="handleReset">
                       <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                    </i-button>
                </div>
            </div>           
        </header>
        <!-- 列表 -->
        <div class="table">
            <Table
                border
                size="small" 
                :columns="columns" 
                :data="data"
                :loading="loading"
                no-data-text="未查询到符合条件的记录"
                stripe>

            </Table>
        </div>
        <!--分页器-->
        <div class="page">
            <Page :total="count" :current='filterObj.pageNo' :page-size="filterObj.pageSize" show-total show-elevator @on-change="changePage"/>
        </div>       
        <!-- 删除确认弹窗 -->
        <Modal
            v-model="showDelConfirmModal"
            title="同城配送"
            class="drugmanagement-commondrug-list-delModal">
            <p>删除后不可恢复，确认删除此条数据吗？</p>
            <div slot="footer">
                <Button style="width:75px;height:35px;" class="cancel-btn btn" @click="showDelConfirmModal = false">取消</Button>
                <Button style="width:75px;height:35px;" class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import distributionheader from "../distributionheader";
    import api from "@/api/commonApi";
    import provinces from "@/components/provinces";
    export default {
        components: {
            provinces,
            distributionheader
        },
    data() {
        return {
            filterObj: {
                pageNo: 1,
                pageSize: '10',
                provinceEnd: null,
                cityEnd: null,
            },
            listObj:{
                pageNo: 1,
                pageSize: '10',
            },
            count: 0,
            loading: false,
            delBtnLoading: false,
            columns: [
                {type: 'sum', title: '排序', width: 80, align: 'center',
                    render: (h, params) => {
                        let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {title:"省份", key:"provinceFrom", align: "center"},
                {title:"城市", key:"cityFrom", align: "center"},
                {title:"签约快递公司",key: "expressCompanyNames", align: "center"},
                {title:"患者支付配送费",key: "unifiedMoney", align: "center"},
                {
                    title: "设置",
                    key: "operate",
                    width: 180,
                    align: "center",
                    render: (h, params) => {
                        return h('div',[
                            h('span', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    color: '#5362e1',
                                    margin: "0px 6px"
                                },
                                on: {
                                    click: () => {
                                        this.handleEdit(params)
                                    }
                                }
                            }, '编辑'),
                            '|',
                            h('span', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    color: '#21c780',
                                    margin: "0px 6px"
                                },
                                on: {
                                    click: () => {
                                        this.handleReview(params)
                                    }
                                }
                            }, '详情'),
                            '|',
                            h('span', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                style: {
                                    color: '#fc6c49',
                                    marginLeft: "6px"
                                },
                                on: {
                                    click: () => {
                                        this.handleRemove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                },
            ],
            data: [],
            showDelConfirmModal: false,
            showEditConfirmModal: false,
            curRecord: {},
            provinceCode:'',
            cityCode:'',
            provList: [],
            cityList: [],
        }
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "",
                title: "系统运营参数配置"
            },
            {
                path: "/index/drugfirmsmanage/deliverycharge/samecity/list",
                title: "同城配送"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.distributionpagelist()
    },
    methods: {
        //检索
        handleSearch() {
            if(this.provinceCode == null || this.cityCode == null){
                this.$Message.error('请选择省市进行检索');
                return false;
            }else{
                this.filterObj.pageNo = 1;
                this.distributionpagelist()
            }
        },
        //重置
        handleReset() {
            this.changeCity(null) 
            this.changeProvince(null)
            this.distributionpagelist()
        },
        handleAdd() {
            this.functionJS.queryNavgationTo(this, "/index/drugfirmsmanage/deliverycharge/samecity/add", {
            });
        },
        handleReview(record) {
            record = record.row;
            this.functionJS.queryNavgationTo(this, "/index/drugfirmsmanage/deliverycharge/samecity/details", {
                id: record.id,
            });
        },
        handleEdit(record) {
            record = record.row;
            this.functionJS.queryNavgationTo(this, "/index/drugfirmsmanage/deliverycharge/samecity/edit",{
                id: record.id,
            });
        },
        handleConfirmEdit() {
            this.distributiondelete();
        },
        handleRemove(record) {
            this.curRecord = record.row;
            this.showDelConfirmModal = true;
        },
        handleDel() {
            this.distributiondelete();
        },
        changePage(index) {
            this.filterObj.pageNo = index;
            this.distributionpagelist()
        },
        changeProvince(val) {
            this.provinceCode = val;
            this.provList = this.$store.getters.getProvinceList
            this.provList.forEach(i =>{
                if (i.id == this.provinceCode) {
                    this.filterObj.provinceEnd = i.name
                }
            })
        },
        changeCity(val) {
            this.cityCode = val;
            this.cityList = this.$store.getters.getCityList(this.provinceCode);
            this.cityList.forEach(i =>{
                if (i.id == this.cityCode) {
                    this.filterObj.cityEnd = i.name
                }
            })
        },
        //分页列表
        distributionpagelist() {
            this.loading = true;
            this.$axios.post(api.findDistributionPage, this.filterObj).then(res => {
                this.loading = false;
                if (res.data.code === 1) {
                    const ret = res.data.object.records;
                    this.data = ret || [];
                    this.count = res.data.object.total;
                    if (!ret || !ret.length) {
                        this.$Message.info('未查询到符合条件的记录')
                    }
                } else {
                    this.$Message.error('请求异常');
                    return false;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
        // 删除
        distributiondelete() {
            this.delBtnLoading = true;
            this.$axios.post(api.deleteDistributionById,{id: this.curRecord.id}).then(res => {
                this.delBtnLoading = false;
                if (res.data.code === 1) {
                    this.$Message.success('删除成功');
                    this.showDelConfirmModal = false;
                } else {
                    this.$Message.error({content: res.data.message});
                    return false;
                }
                this.distributionpagelist();
            }).catch(() => {
                this.delBtnLoading = false;
            });
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj))
        },
    },
    watch: {
        'filterObj.pageSize'(nv, ov) {
            this.filterObj.pageNo = 1;
            this.distributionpagelist();
        },
    }
}
</script>
<style scoped lang="less">
    .list {
        width: 100%;
        min-width: 1200px;
        padding: 10px;
        margin: 0 auto;
        background: #fff;
        min-height: 600px;
        header {
            width: 100%;
            position: relative;
            .filter-part {
                display: flex;
                flex-wrap: wrap;
                .filter-item {
                    display: flex;
                    margin: 10px 10px 10px 0;
                    label {
                        white-space: nowrap;
                        line-height: 32px;
                        width: 100px;
                        text-align: right;
                    }
                    .input {
                        width: 220px;
                    }
                    .select {
                        width: 70px;
                    }
                }
                .filter-btn-group {
                    margin: 10px 10px 10px 0;
                    flex: 0 0 auto;
                }
            }
        }
        .table {
            .page-wrapper {
                display: flex;
                // margin-top: 20px;
                justify-content: space-between;
                .des {
                    display: flex;
                    align-items: center;
                    .select {
                        width: 50px;
                    }
                }
            }
        }
        .page{
            text-align: center;
           margin-top: 20px;
        }
    }
</style>